<template>
  <van-search
    v-model="searchValue"
    :placeholder="placeholder"
    :left-icon="searchGrayIcon"
    @update:model-value="handleSearch"
    @focus="handleSearchFocus"
    @blur="handleSearchBlur"
    @search="handleSearch"
    @clear="handleClear"
    clearable
  />
  <div class="result-list" v-show="showResultList && resultList.length > 0">
    <div
      class="result-item"
      v-for="(item, index) in resultList"
      :key="index"
      @mousedown.prevent="handleSelect(item)"
    >
      <div class="result-item-name">
        {{ item.industryName }} {{ item.cityName ? `(${item.cityName})` : '' }}
      </div>
    </div>
  </div>
  <div
    class="no-data"
    v-show="showResultList && resultList.length === 0 && searchValue"
  >
    暂无数据
  </div>
</template>

<script setup>
import { ref, onUnmounted } from 'vue';
import { industrySearch } from '@/api/volunteer';
import { debounce } from 'lodash-es';
import searchGrayIcon from '@/assets/images/search-gray-icon.png';

const props = defineProps({
  placeholder: {
    type: String,
    default: '搜索',
  },
  searchType: {
    type: String,
    default: 'college', // 可选值：college-院校搜索, major-专业搜索, industry-产业搜索
  },
});

const emit = defineEmits(['select', 'clear']);

const searchValue = ref('');
const showResultList = ref(false);
const resultList = ref([]);

// 防抖处理搜索请求
const debouncedSearch = debounce(async () => {
  if (!searchValue.value) {
    resultList.value = [];
    return;
  }
  try {
    await getSearchIndustryListFn();
  } catch (error) {
    console.error('搜索失败:', error);
    resultList.value = [];
  }
}, 300);

const getSearchIndustryListFn = async () => {
  const params = {
    industryName: searchValue.value.trim(),
    pageNo: 1,
    pageSize: 10,
  };
  const res = await industrySearch(params);
  if (res.code === 200) {
    resultList.value = res.data;
  } else {
    resultList.value = [];
  }
};

const handleSearch = (value) => {
  searchValue.value = value;
  debouncedSearch();
};

const handleSearchFocus = () => {
  showResultList.value = true;
};

const handleSearchBlur = () => {
  setTimeout(() => {
    showResultList.value = false;
  }, 200);
};

const handleSelect = (item) => {
  searchValue.value = item.industryName;
  showResultList.value = false;
  emit('select', item);
};

const handleClear = () => {
  searchValue.value = '';
  resultList.value = [];
  emit('clear');
};

onUnmounted(() => {
  searchValue.value = '';
  resultList.value = [];
});

// 暴露方法给父组件
defineExpose({
  setResultList: (list) => {
    resultList.value = list;
  },
  clearSearch: () => {
    handleClear();
  },
  getSearchValue: () => searchValue.value,
});
</script>

<style scoped lang="scss">
.search-box {
  position: relative;
  width: 100%;

  .result-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 999;
    padding: 6px 0;
    .result-item {
      padding: 12px 18px;
      .result-item-name {
        font-size: 18px;
        color: #333;
        line-height: 20px;
      }
    }
  }

  .no-data {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 16px;
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    text-align: center;
    color: #999;
    z-index: 999;
  }
}
</style>
